<script setup>
import {ref} from 'vue'
const currentIndex = ref(0)
const records = ref([
	{name:'探讨在当前注重外貌的社会环境中，化妆品市场的消费者行为变化以及企业所采取的有效的营销手段，例如社交媒体营销、网红带货等。'},
	{name:'探讨在当前注重外貌的社会环境中，化妆品市场的消费者行为变化以及企业所采取的有效的营销手段，例如社交媒体营销、网红带货等。'},
	{name:'探讨在当前注重外貌的社会环境中，化妆品市场的消费者行为变化以及企业所采取的有效的营销手段，例如社交媒体营销、网红带货等。'},
])
const itemClick = (index)=>{
	currentIndex.value = index
}
</script>

<template>
<div class="wrap">
	<div class="title">记录：</div>
	<div class="content">
		<div class="item" :class="[index===currentIndex?'selected':'']"
				 v-for="(item,index) in records"
				 :key="index"
				 @click="itemClick(index)"><span class="desc">{{item.name}}</span></div>
	</div>
</div>
</template>

<style scoped lang="scss">
@import "../../../../css/common";
.wrap{
	width: 350px;
	background: #fff;
	padding: 40px 24px 0;
	box-sizing: border-box;
	.title{
		font-weight: 430;
		font-size: 22px;
		color: #000000;
		line-height: 26px;
		margin-bottom: 32px;
	}
	.content{
		.item{
			cursor: pointer;
			box-sizing: border-box;
			padding: 0 12px;
			height: 50px;
			margin-bottom: 32px;
			display: flex;
			flex-direction: row;
			align-items: center;
			&.selected{
				background: #F2F7F9;
				border-radius: 192px;
			}
			@include line-clamp(50px,1);
			.desc{
				font-weight: 305;
				font-size: 18px;
				color: #000000;
			}
		}
	}
}
</style>
